<template>
  <!-- 点赞统计 -->
  <div class="box">
    <div class="fabulous_top">
      <span
        class="left"
        style="margin-left:5vw"
      >{{data_time}}</span>
      <span
        class="right"
        @click="time=true"
      ><img src="@/static/img/icon/日历.png"></span>
    </div>
    <!-- 时间插件 -->
    <van-popup
      v-model="time"
      :safe-area-inset-bottom="true"
      :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
      :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
    >
      <van-datetime-picker
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="year-month"
        @confirm="getTime_month"
        @cancel="time=false"
      />

    </van-popup>
    <div class="fabulous_centent">
      <div
        id="myChart"
        :style="{width: '100%', height: '280px',marginTop:'30px'}"
      ></div>
      <div style="border-top: 1px solid silver;">
        <p>数据统计</p>
        <dl class="left">
          <dt>点赞人</dt>
          <dd>{{oneself.name}}</dd>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.name}}</dd>
        </dl>
        <dl class="left">
          <dt>获得跟赞次数</dt>
          <dd>{{oneself.hezanFuTime}}</dd>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.hezanFuTime}}</dd>
        </dl>
        <dl class="left">
          <dt>获得点赞次数</dt>
          <dd>{{oneself.praiseFuTime}}</dd>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.praiseFuTime}}</dd>
        </dl>
      </div>
    </div>
    <van-overlay
      :show="isShowloading"
      @click="isShowloading = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <van-loading
          vertical
          type="spinner"
          size="50"
        >数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script type="text/javascript">
import {
  Icon,
  Popup,
  Row,
  Col,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
  Overlay,
  Loading
} from "vant";
export default {
  data() {
    return {
      radio: "1",
      time: false,
      minDate: new Date(2018, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      arr: [],
      list: [],
      oneself: []
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
      [Loading.name]: Loading,
    [Overlay.name]: Overlay
  },
   created(){
     dd.biz.navigation.setTitle({
        title: "被点赞统计" //控制标题文本，空字符串表示显示默认文本
      });
  },
  mounted() {
    // this.getAppreciate();
    this.dataTime();
  },
  methods: {
    // 当前时间
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.data_time = year;
      this.getAppreciate(year);
    },
    // 选择时间
    getTime_month(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = yy + "-" + mm;
      this.data_time = resDate;
      this.time = false;
      this.getAppreciate(resDate);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    async getAppreciate(year) {
        this.isShowloading=true;
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http.get(
        `yuepoints/getAppreciate?corpId=${corpId}&ddId=${userId}&date=${year}`
      )
      .then(res=>{
        const {
            data: {praiseFuTime,praiseFu},
            errcode,
            errmsg
          } = res.data;
        if(errcode == "0000"){
            this.isShowloading=false;
          this.arr = res.data.data.praiseFuTime;
          this.oneself = res.data.data.praiseFu;
          this.drawLine();
        }else if(errcode == "1005"){
            this.isShowloading=false;
          this.$toast(errmsg);
        }
      })
     
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let arr_list = this.arr;
      let data_name = [];
      let praiseFuTime=[];
      let hezanFuTime=[];
      for (let i = 0; i < arr_list.length; i++) {
        data_name.push(arr_list[i].name);
        praiseFuTime.push(arr_list[i].praiseFuTime);
        hezanFuTime.push(arr_list[i].hezanFuTime)
      }
      // 绘制图表
      myChart.setOption({
        // legend: {},
        // tooltip: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          top: 60,
          right: 70,
          bottom: 30,
          left: 60
        },
        legend: {
          top: 32,
          left: "center",
          data: ["获得点赞", "获得跟赞"]
        },
        // dataset: {
        //   source: "["+arr_list+"]"
        // },
        calculable : true,
        xAxis: { type: "category", data: data_name },
        yAxis: [
          {
            type: "value",
            // name: "",
            // // data:arr_list
            // nameLocation: "center",
            // nameGap: 35,
            // nameRotate: 0,
            // nameTextStyle: {
            //   fontSize: 16
            // },
            // //默认以千分位显示，不想用的可以在这加一段
            // axisLabel: {
            //   //调整左侧Y轴刻度， 直接按对应数据显示
            //   show: true,
            //   showMinLabel: true,
            //   showMaxLabel: true,
            //   formatter: function(value) {
            //     return value;
            //   }
            // }
          }
        ],
        series: [
          { name: "获得点赞", type: "bar", yAxisIndex: 0, type: "bar",data: praiseFuTime},
          { name: "获得跟赞", type: "bar", yAxisIndex: 0, type: "bar" ,data:hezanFuTime}
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
    /deep/ .van-overlay {
    z-index: 2;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .fabulous_top {
    color: #0497ff;
    height: 6vh;
    line-height: 6vh;
    background: #fff;
    border-bottom: 1px solid silver;
    span:last-child {
      display: inline-block;
      height: 25px;
      margin-top: 5px;
      img {
        height: 100%;
      }
    }
  }
  p,
  dl,
  dt,
  dd {
    margin: 0px;
    text-align: left;
  }
  dd{
    height: 22px;
  }
  span {
    display: inline-block;
  }
  p {
    font-weight: 700;
    padding-top: 15px;
  }
  dl {
    margin-right: 13vw;
    margin-top: 15px;
  }
  dt {
    font-weight: 700;
  }
  dl:last-child {
    margin-right: 0px;
  }
  .fabulous_centent {
    margin: 10px 15px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
    margin-right: 5vw;
  }
}
</style>
